<template>
    <div class="bigBox">
        <div class="left">
            <div class="title">
                关于我们
               <hr  color="#fe8c00" size="5px" />
            </div>
            <div class="contain">
                <p>
                    非物质文化遗产，凝结和传递着一个民族和地域的历史记忆、<br>共同情感和经验智慧，然而随着时代的快速变迁，非遗渐渐淡<br>出人们的视野，非遗文化面临销声匿迹，而我们作为华夏民族<br>的一份子，自当勿忘在莒!

                </p>
                <p>
                    非遗“湘”传以宣传、保护、传承湖南非物质文化遗产为核心，集<br>结了非遗传承人、非遗爱好者、兴趣者、国内各大高校、企业、品<br>牌于一体的非遗在线学习、传承、创作的资源平台;主要的业务功能<br>有:非遗科普、非遗课堂、非遗商城、非遗活动、合作共赢!

                </p>
            </div>
        </div>
        <div class="formInput">
            <div class="top">
                <div class="text">密码登录</div>
                <div class="symbol">×</div>
            </div>
            <hr width="100%" size="0.1px" color="#AAAAAA" />
            <div class="_input">
                <!-- <el-input size="60px" v-model="account" placeholder="请输入账号"></el-input>
                <el-input size="60px" placeholder="请输入密码" v-model="password" show-password></el-input>
                <el-button @click="login" >登录</el-button> -->
                <el-form
                    :model="LoginForm"
                    :rules="login_form"
                    class="login_form"
                    ref="resetLoginForm"
>
               <el-form-item prop="username">
                   <el-input v-model="LoginForm.username"
                    placeholder="请输入用户名"
                    prefix-icon="iconfont icon-user"></el-input>
               </el-form-item>
               <el-form-item prop="password">
                   <el-input v-model="LoginForm.password"
                   placeholder="请输入密码"
                   prefix-icon="iconfont icon-3702mima"
                   type="password"></el-input>
               </el-form-item>
              <el-form-item class="btns">
                  <el-button type="primary" @click="login">登录</el-button>
               </el-form-item>
           </el-form>

            </div>
            <div class="_buttom">
                <div class="text">
                    <div class="bleft"> 第三方账号登录 </div>
                    <div class="bright">
                        <span>忘记密码</span>
                        <span>|</span>
                        <span>注册</span>
                    </div>
                </div>
                <div class="icon">
                    <div>
                        <img src="../../assets/images/class/qq.png" alt="">
                    </div>
                    <div>
                        <img src="../../assets/images/class/weixin.png" alt="">
                    </div>

                    <div>
                        <img src="../../assets/images/class/xinlangweibo.png" alt="">
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            LoginForm: { username: 'addfmin', password: '123456' }, 
            login_form: { 
                username:[ 
                    { required: true, message: '请输入用户名', trigger: 'blur' }, 
                    { min: 3, max:10, message: '长度在3到10个字符之间', trigger: 'blur' } 
                ], 
                password: [ 
                    {required: true, message: '请输入密码', trigger: 'blur' }, 
                    { min: 6, max: 15,message: '长度在6到16个字符之间', trigger: 'blur' } 
                ] 
            }

        }
    },
    methods:{
        login () { 
            if (this.$data.LoginForm.username !== 'admin' || this.$data.LoginForm.password!== '123456') 
            return this.$message.error('登录失败')
            this.$message.success('登录成功')
            window.sessionStorage.setItem('rootId',0);
            window.sessionStorage.setItem('isLogin',1)
            this.$router.push('/userCenter')
        }

    }
    
}
</script>

<style lang="less" scoped>
    .bigBox{
        display: flex; 
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 850px ;
        background-image: url(../../assets/images/index/图片4.png);
        background-size: 100%;
        .left{
            margin-top: 150px ;
            margin-left: 150px;
            color: #fff;
            font-size: 23px;
            .title{
                font-size: 30px;
                font-weight: 600;
            }
        }
        .formInput{
            width: 555px;
            height: 595px;
            margin-top: 150px;
            margin-right: 100px;
            background-color: #fff;
            display: flex; flex-direction: column;
            .top{
                margin-left: 10px;
                font-size: 25px;
                display: flex; 
                flex-direction: row;
                justify-content: space-between;
                padding: 20px;
                .symbol{
                    font-size: 60px;
                    line-height: 10px;
                    color: #AAAAAA;
                }
            }
            ._input{
                margin:40px;
                .el-input{
                    height: 60px;
                    margin-bottom: 20px;
                    /deep/.el-input__inner{
                        height: 60px;
                        border: 0.3px solid #7f7f7f;
                    }
                }
                .el-button{
                    width: 100%;
                    height: 60px;
                    font-size: 25px;
                    border: 1px solid #AAAAAA;
                    background-color: #AAAAAA;
                    color: #fff;
                }
            }
        }
        ._buttom{
            .text{
                font-size: 25px;
                display: flex; 
                flex-direction: row; 
                justify-content: space-between;
                color: #AAAAAA;
                margin: 0 40px;
                span{
                    margin:0 10px;
                }

            }
            .icon{
               display: flex; flex-direction: row;
               margin: 0 150px;
               img{
                   width: 50px;
                   height: 50px;
                   margin: 20px;
               }
            }
        }
   }

</style>